<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>XPHoot - Player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" data-th-href="${portal.assetUrl({'_path=css/xphoot-player.css'})}" href="../../../assets/css/xphoot-player.css"
          type="text/css"/>
</head>
<body class="playerview">


<div id="joinPanel" style="display: none;">
    <img data-th-src="${portal.assetUrl({'_path=img/logo.png'})}"/>

    <fieldset class="joinPanelFields">
        <div class="joinElement">
            <input id="pin" type="text" value="" placeholder="PIN" maxlength="5" autocapitalize="off" autocorrect="off"/>
        </div>
        <div class="joinElement">
            <input id="nick" type="text" value="" placeholder="Nick" maxlength="20" autocapitalize="off" autocorrect="off"/>
        </div>
        <div class="joinElement">
            <button type="button" name="send" id="sendJoin">Join</button>
        </div>
        <div id="message"></div>
    </fieldset>
</div>

<div id="readyPanel" style="display: none;">
    <h3>Get ready <span id="readyNick"></span>!</h3>
</div>

<div id="questStartPanel" style="display: none;">
    <div class="answer-grid-wrapper">
        <div id='answer-grid' class="answer-grid-4">
            <div id="answerRed" class="answerRed"><img class="answerImage" th:src="${portal.assetUrl({'_path=img/circle.png'})}"/></div>
            <div id="answerBlue" class="answerBlue"><img class="answerImage" th:src="${portal.assetUrl({'_path=img/square.png'})}"/></div>
            <div id="answerGreen" class="answerGreen"><img class="answerImage" th:src="${portal.assetUrl({'_path=img/triangle.png'})}"/>
            </div>
            <div id="answerYellow" class="answerYellow"><img class="answerImage" th:src="${portal.assetUrl({'_path=img/cross.png'})}"/>
            </div>
        </div>
    </div>
</div>

<div id="correctAnswerPanel" style="display: none;">
    <h3>Correct!</h3>
</div>

<div id="wrongAnswerPanel" style="display: none;">
    <h3>Wrong!</h3>
</div>


<div id="quizEndPanel" style="display: none;">
    <div id="quizResultText">Game Over!</div>
    <div id="quizResultPlace"><span id="playerPos"></span></div>
</div>


<script data-th-src="${portal.serviceUrl({'_service=init', 'r=player'})}" src="#"></script>
<script data-th-src="${portal.assetUrl({'_path=js/jquery-3.4.1.min.js'})}" src="../../../assets/js/jquery-3.4.1.min.js"></script>
<script data-th-src="${portal.assetUrl({'_path=js/xphoot-player.js'})}" src="../../../assets/js/xphoot-player.js"></script>
</body>
</html>
